<script setup lang="ts">
import {ref, onMounted} from 'vue'
import * as echarts from 'echarts'
import 'echarts-liquidfill'

// 挂载的ref
const echart = ref()
onMounted(() => {
  const myCharts = echarts.init(echart.value)
  const option = {
    backgroundColor: '#545061',
    title: {
      left: 'center',
      bottom: 10,
      text: '用户满意度',
      textStyle: {
        fontWeight: 'bold',
        fontSize: 20,
        color: '#ffffff'
      },
    },
    series: [
      {
        type: "liquidFill",
        name: '申请方',
        radius: "85%",
        center: ['50%', '45%'],
        shape: "path://M657.462,490.835c-21.359-45.771-82.071-35.092-82.471,18.032-0.221,29.177,28.91,40.083,48.306,51.747,18.807,11.312,32.193,26.786,34.291,33.373,1.8-6.454,16.705-22.366,34.115-33.689,19.036-12.382,48.527-22.572,48.306-51.748C739.607,455.294,677.839,446.889,657.462,490.835Z",
        data: [0.8, 0.8, 0.8],
        color: ['#8b51fd'],
        outline: {
          show: false,
        },
        backgroundStyle: {
          color: '#edd4d4',
          borderColor: "#fff",
          borderWidth: 1,
          shadowColor: "rgba(0, 0, 0, 0.4)",
          shadowBlur: 0,
        },
        label: {
          normal: {
            position: ["50%", "40%"],
            formatter: () => {
              return (0.8 * 100) + '%'
            },
            textStyle: {
              fontSize: 30,
            },
          },
        },
      },
    ],
  };
  myCharts.setOption(option)
})
</script>

<template>
  <div class="box center">
    <div class="box-body">
      <div class="charts" ref="echart">
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;

  .box-body {
    width: 90%;
    height: 90%;
    border-radius: 10px;
    box-shadow: 2px 1px 8px 2px rgb(123, 173, 222);
    background-color: #555162;

    .charts {
      width: 100%;
      height: 100%;
    }
  }
}
</style>